<script setup lang="ts">
import type { HtmlProps } from './types';

import { h } from 'vue';

import { Modal } from 'ant-design-vue';

const props = withDefaults(defineProps<HtmlProps>(), {
  content: '暂无内容',
  btnType: 'default',
  btnText: '内容预览',
});

async function openModal() {
  Modal.info({
    width: '80%',
    title: 'HTML查看器',
    content: h('div', {
      innerHTML: props?.content,
      style: { maxHeight: '60vh', overflow: 'auto' },
    }),
    okText: '关闭',
    maskClosable: true,
  });
}
</script>

<template>
  <div>
    <a-button size="small" :type="props?.btnType" @click="openModal">
      {{ props?.btnText ? props?.btnText : '内容预览' }}
    </a-button>
  </div>
</template>
